import React from 'react';
import { Form, Input, Button, Switch, List, Card, message } from 'antd';
import { LockOutlined, MobileOutlined, SafetyCertificateOutlined } from '@ant-design/icons';

interface SecurityFormValues {
  oldPassword: string;
  newPassword: string;
  confirmPassword: string;
  twoFactorEnabled: boolean;
}

const SecurityForm: React.FC = () => {
  const [form] = Form.useForm();

  const onFinish = (values: SecurityFormValues) => {
    if (values.newPassword !== values.confirmPassword) {
      message.error('两次输入的密码不一致！');
      return;
    }
    message.success('安全设置更新成功！');
  };

  const devices = [
    {
      id: '1',
      name: 'Windows PC',
      lastLogin: '2024-03-20 14:30',
      location: '北京'
    },
    {
      id: '2',
      name: 'iPhone 12',
      lastLogin: '2024-03-20 15:45',
      location: '上海'
    }
  ];

  return (
    <div style={{ maxWidth: 800 }}>
      <Card title="密码修改" style={{ marginBottom: 24 }}>
        <Form
          form={form}
          layout="vertical"
          onFinish={onFinish}
        >
          <Form.Item
            label="当前密码"
            name="oldPassword"
            rules={[{ required: true, message: '请输入当前密码！' }]}
          >
            <Input.Password prefix={<LockOutlined />} placeholder="请输入当前密码" />
          </Form.Item>

          <Form.Item
            label="新密码"
            name="newPassword"
            rules={[
              { required: true, message: '请输入新密码！' },
              { min: 8, message: '密码长度不能少于8位！' }
            ]}
          >
            <Input.Password prefix={<LockOutlined />} placeholder="请输入新密码" />
          </Form.Item>

          <Form.Item
            label="确认新密码"
            name="confirmPassword"
            rules={[{ required: true, message: '请确认新密码！' }]}
          >
            <Input.Password prefix={<LockOutlined />} placeholder="请确认新密码" />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit">
              修改密码
            </Button>
          </Form.Item>
        </Form>
      </Card>

      <Card title="两步验证" style={{ marginBottom: 24 }}>
        <Form.Item
          label="启用两步验证"
          name="twoFactorEnabled"
          valuePropName="checked"
        >
          <Switch />
        </Form.Item>
        <p style={{ color: '#999' }}>
          启用两步验证后，登录时需要输入手机验证码
        </p>
      </Card>

      <Card title="登录设备管理">
        <List
          dataSource={devices}
          renderItem={(item) => (
            <List.Item
              actions={[
                <Button type="link" danger>
                  退出登录
                </Button>
              ]}
            >
              <List.Item.Meta
                avatar={<MobileOutlined />}
                title={item.name}
                description={`最后登录时间：${item.lastLogin} | 登录地点：${item.location}`}
              />
            </List.Item>
          )}
        />
      </Card>
    </div>
  );
};

export default SecurityForm; 